<template>
    <div>
        <Card>
            <Row class="form-row">
                <Form :model="filters" ref="form1" label-position="right" :label-width="90" inline>
                    <FormItem label="分类">
                        <Select v-model="value" style="width: 250px">
                            <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="业主" prop="name">
                        <Input v-model="filters.name" placeholder="业主" style="width: 250px"/>
                    </FormItem>
                    <FormItem label="房产" prop="room">
                        <Input v-model="filters.room" placeholder="房产" style="width: 250px"/>
                    </FormItem>
                    <FormItem label="状态">
                        <Select v-model="value1" style="width: 250px">
                            <Option v-for="item in options1" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="开始日期">
                        <DatePicker @on-change="" format="yyyy-MM-dd" type="date" confirm placement="bottom-start" placeholder="请选择开始日期" style="width: 250px" v-model="date"></DatePicker>
                    </FormItem>
                    <FormItem label="解决日期">
                        <DatePicker @on-change="" format="yyyy-MM-dd" type="date" confirm placement="bottom-start" placeholder="请选择解决日期" style="width: 250px" v-model="date1"></DatePicker>
                    </FormItem>
                </Form>
            </Row>
            <Rom>
                <Button type="primary" icon="ios-search" @click="handleQuery()" style="margin:5px 5px">
                    搜索
                </Button>
                <Button type="success" icon="md-add" @click="handleAdd()" style="margin:5px 5px">
                    新增
                </Button>
            </Rom>
            <Table stripe border :loading="tableLoading" :columns="tableColumn" :data="tableData" ref="table">
            </Table>

            <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total
                  show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
            </Page>
        </Card>
        <Modal v-model="formVisible" title="对客服务" class="modal-content" width="900" :mask-closable="false">
            <Form :model="modal" :rules="rule" ref="form2" label-position="right" :label-width="110" class="myOpenFrom">
                <FormItem label="分类" prop="type">
                    <Select v-model="modal.type">
                        <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="业主" prop="name">
                    <Input v-model="modal.name" placeholder="业主"/>
                </FormItem>
                <FormItem label="房产" prop="room">
                    <Input v-model="modal.room" placeholder="房产"/>
                </FormItem>
                <FormItem label="反馈内容" prop="content">
                    <Input v-model="modal.content" placeholder="反馈内容"/>
                </FormItem>
                <FormItem label="状态" prop="status1">
                    <Input v-model="modal.status1" placeholder="状态"/>
                </FormItem>
                <FormItem label="解决方案" prop="program">
                    <Input v-model="modal.program" placeholder="解决方案"/>
                </FormItem>
                <FormItem label="反馈日期">
                    <DatePicker @on-change="" format="yyyy-MM-dd" type="date" confirm placement="bottom-start" placeholder="请选择反馈日期" style="width: 100%" v-model="modal.date"></DatePicker>
                </FormItem>
                <FormItem label="解决日期">
                    <DatePicker @on-change="" format="yyyy-MM-dd" type="date" confirm placement="bottom-start" placeholder="请选择解决日期" style="width: 100%" v-model="modal.date1"></DatePicker>
                </FormItem>
            </Form>

            <div slot="footer">
                <Button type="text" size="large" @click="onCancel">取消</Button>
                <Button type="primary" size="large" @click="handleSubmit" :loading="formLoading">确定</Button>
            </div>
        </Modal>

        <Modal v-model="formFollowVisible" title="情况跟进" class="modal-content" width="900" :mask-closable="false">
            <Form :model="modal" :rules="rule" ref="form2" label-position="right" :label-width="110" class="myOpenFrom">
                <FormItem>
                    <Steps :current="0">
                        <Step title="未接入" content="请尽快接入"></Step>
                        <Step title="进行中" content="已经进行"></Step>
                        <Step title="已完成" content="已确认完成"></Step>
                    </Steps>
                </FormItem>
                <Row>
                    <Col span="8">
                        <FormItem label="分类：">
                            <p>装修管理</p>
                        </FormItem>
                        <FormItem label="反馈内容：">
                            <p>房屋装修</p>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="保修状态：">
                            <p>未接入</p>
                        </FormItem>
                        <FormItem label="联系手机号：">
                            <p>112321931</p>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="反馈业主：">
                            <p>张三</p>
                        </FormItem>
                    </Col>
                </Row>
            </Form>

            <div slot="footer">
                <Button type="text" size="large" @click="onCancel">取消</Button>
                <Button type="primary" size="large" @click="handleSubmit" :loading="formLoading">确定</Button>
            </div>
        </Modal>
    </div>
</template>


<script>
    import Treeselect from "@riophae/vue-treeselect";
    import Cookies from 'js-cookie'
    import {TOKEN_KEY} from '@/libs/util'
    const token = Cookies.get(TOKEN_KEY)
    //校验规则
    const rules = {
        type:[{
            required: true,
            message: "请选择分类"
        }],
        content:[{
            required: true,
            message: "请输入反馈内容"
        }],
        status1:[{
            required: true,
            message: "请输入状态"
        }],
        program:[{
            required: true,
            message: "请输入解决方案"
        }]
    };
    //打开页面
    let handleAdd = function (id) {
        this.$refs["form2"].resetFields();
        this.modal = {};
        this.tableLoading = false;
        this.formVisible = true;
    };
    let onCancel = function () {
        this.$refs["form2"].resetFields();
        this.formLoading = false;
        this.formVisible = false;
        this.formFollowVisible = false;
    };
    //保存
    let handleSubmit = function () {
        this.$refs["form2"].validate(valid => {
            if (valid) {
                this.formLoading = false;
                this.formVisible = false;
            }
        });
        this.formFollowVisible = false;
    };

    export default {
        name: "disList",
        components: {
            Treeselect
        },
        data() {
            return {
                modal_name:'',
                modal_room:'',
                modal_unit:'',//单元
                modal_groupName:'',//组团
                modal_building:'',//楼栋
                formVisible: false,
                formFollowVisible: false,
                pageNum: 1,
                //每页数量
                pageSize: 10,
                //总数
                pageTotal: 0,
                //验证规则
                rule: rules,
                filters:{},
                date:'',
                modal:{},
                options: [{
                    value: '1',
                    label: '收楼维修管理'
                }, {
                    value: '2',
                    label: '业主投诉管理'
                }, {
                    value: '3',
                    label: '装修管理'
                }, {
                    value: '4',
                    label: '业主日常沟通管理'
                }, {
                    value: '5',
                    label: '保洁'
                }, {
                    value: '6',
                    label: '绿化'
                },{
                    value: '7',
                    label: '工程服务管理'
                }],
                value: '',
                options1: [{
                    value: '1',
                    label: '未解决'
                }, {
                    value: '2',
                    label: '进行中'
                }, {
                    value: '3',
                    label: '已解决'
                }],
                //表格数据
                tableData: [
                    {
                        type: "装修管理",
                        name: "张三",
                        room: "5栋1单元101",
                        content: "房屋装修",
                        status: "未接入",
                        program: "现场指导",
                        data: "2018-09-13",
                        data1: "",
                    },
                    {
                        type: "保洁",
                        name: "李四",
                        room: "10栋2单元202",
                        content: "灰尘太多",
                        status: "已解决",
                        program: "每日早上，晚上打扫清洁1次",
                        data: "2018-09-10",
                        data1: "2018-09-11",
                    },
                    {
                        type: "绿化",
                        name: "王五",
                        room: "9栋1单元504",
                        content: "绿色植物太少",
                        status: "进行中",
                        program: "每周养护一次植物，没年采购一批",
                        data: "2018-09-12",
                        data1: "",
                    }
                ],
                //表格字段
                tableColumn: [
                    {
                        title:"分类",
                        key:"type",
                    },
                    {
                        title:"业主",
                        key:"name",
                    },
                    {
                        title:"房产",
                        key:"room",
                    },
                    {
                        title: "反馈内容",
                        key: "content"
                    },
                    {
                        title: "状态",
                        key: "status"
                    },
                    {
                        title: "解决方案",
                        key: "program"
                    },
                    {
                        title: "提出反馈日期",
                        key: "data"
                    },
                    {
                        title: "解决日期",
                        key: "data1"
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params.index)
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index)
                                        }
                                    }
                                }, '跟进情况')
                            ]);
                        }
                    }
                ],
                //数据表格隐藏那个状态
                tableLoading: false,
                formLoading:false,
                value4:'',
            }
        },
        created: function () {
        },
        methods: {
            handleAdd,
            onCancel,
            handleSubmit,
            handlePage(value) {
                this.pageNum = value;
            },
            handlePageSize(value) {
                this.pageSize = value;
            },
            show (index) {
                this.handleAdd();
            },
            remove (index) {
                this.formFollowVisible = true
            }
        }
    };
</script>
<style lang="less">
</style>
